<script lang="ts" setup>
import { computed } from "vue"
import BarUntil from "./echartsItem/bar.vue"
import Bar1Until from "./echartsItem/bar1.vue"
import CrossUntil from "./echartsItem/cross1.vue"
import { useSettingsStore } from "@/store/modules/settings"
const settingsStore = useSettingsStore()
const showIndexEcharts = computed(() => {
  return settingsStore.showIndexEcharts
})
</script>

<template>
  <div class="app-container center">
    <el-row :gutter="20" v-if="showIndexEcharts">
      <el-col :span="8">
        <el-card shadow="hover"> <Bar1Until /> </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover"> <CrossUntil /> </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover"> <BarUntil /> </el-card>
      </el-col>
    </el-row>
    <img v-else src="@/assets/layout/welcomeHome.png" class="home-bg" />
  </div>
</template>
<style lang="scss" scoped>
.center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.center .home-bg {
  width: 70%;
  max-width: 1200px;
  // bottom: 20px;
  padding-bottom: 20px;
}
</style>
